<template>
	<div>
		<div class="header">
			<van-cell size="large">
				<div slot="icon" class="iconko">
					<van-icon name="arrow-left" />
				</div>
				<div slot="title" class="cellbox">支付结果</div>
			</van-cell>

		</div>
		<div id="payment">
			<van-empty>
				<div slot='description' class="zf">支付成功</div>
				<div slot='image'><img src="../assets/images/20210325094234.png" /></div>
				<van-button round type="danger" class="bottom-button" color="#A8896D" @click="toorder">查看订单</van-button>
				<div class="tohome" @click="tohome">回到首页</div>
			</van-empty>
		</div>
	</div>
</template>


<script>
	import {
		Empty
	} from 'vant';
	import {
		Button
	} from 'vant';
	import {
		Cell,
		CellGroup
	} from 'vant';
	import {
		Icon
	} from 'vant';
	export default {
		components: {
			[Empty.name]: Empty,
			[Button.name]: Button,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Icon.name]: Icon,
		},
		methods: {
			toorder() {
				this.$router.push({
					path: '/order'
				})
			},
			tohome() {
				this.$router.push({
					path: '/home'
				})
			}
		}
	}
</script>
[Empty.name]:Empty
<style lang="less" scoped>
	.header .van-cell {
		box-shadow: 0 1px 1px rgba(100, 100, 100, 0.2);
		.cellbox {
			font-size: 15px;
			text-align: center;
		}
		.iconko {
			font-size: 20px;
		}
	}
	
	
	

	#payment {
		  margin-top: 100px;

		.tohome {
			text-align: center;
			margin-top: 20px;
			color: #999999;
			font-size: 14px;
		}

		.zf {
			font-size: 20px;
			font-weight: bold;
		}
	}

	.bottom-button {
		width: 160px;
		height: 40px;
	}

	
</style>
